<template>
    <div class="bg-page rounded-lg cursor-pointer overflow-hidden">
        <swiper class="!mx-0" :slidesPerView="'auto'" :spaceBetween="16" @swiper="onSwiper">
            <swiper-slide
                v-for="(item, index) in option"
                :key="index"
                style="width: auto"
            >
                <div
                    class="tabs-item px-[5px] py-[16px]"
                    :class="{ 'active': item.type == optionActive }"
                    @click="handleClick(item.type)"
                >
                    {{ item.name }}
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script lang="ts" setup>
import 'swiper/css'
import type { Swiper as SwiperInstance } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { option } from '../../hooks/useDrawEffect'

const props = defineProps({
    // 通道类型: [mj,sd,doubao,dalle]
    type: {
        type: String,
        default: ''
    }
})

const router = useRouter()
const optionActive = ref<string>(props.type)

const swiperInstance = shallowRef<SwiperInstance>()
const onSwiper = (swiper: SwiperInstance) => {
    swiperInstance.value = swiper
}

/**
 * 跳转页面
 *
 * @param {string} type
 * @author zero
 */
const handleClick = (type: string) => {
    optionActive.value = type
    router.push({
        path: '/apply/draws/' + type
    })
}
</script>

<style lang="scss" scoped>
:deep(.swiper-slide) {
    margin: 5px;
    margin-right: 0 !important;
    .tabs-item {
        padding: 8px;
        color: var(--el-text-color-regular);
        border-radius: 8px;
        &.active {
            font-weight: bold;
            color: var(--el-color-primary);
            background-color: var(--el-bg-color);
        }
        &:hover {
            color: var(--el-color-primary);
        }
    }
}
</style>
